Vue.component('vue-pager', {
	props: ['total_page','cur_page'],
	computed: {
		page_indexs: function(){
			var start = 0;	//开始页码
			var end = 0;	//结束页码

			if (this.cur_page - 5 >= 1) {
				start = this.cur_page-5;
			} else {
				start = 1;
			}
			if (this.cur_page + 5 <= this.total_page) {
				end  = this.cur_page + 5;
			} else {
				end = this.total_page;
			}
			var arr = [];
			for(var i=start;i<=end;i++){
				arr.push(i);
			}
			//console.log(arr);
			return arr;
		}
	},
  	template: `<ul class="pagination" v-if="page_indexs.length > 1">
				<template v-if="cur_page !=1">
					<li><a href="#" @click="handleClick(1)">首页</a></li>
					<li><a href="#" @click="handleClick(cur_page-1)">上一页</a></li>
				</template>
				<li v-for="index in page_indexs" :class="[cur_page==index ? 'active' : '']">
					<a href="#" @click="handleClick(index)">{{index}}</a>
				</li>
				<template v-if="cur_page !=page_indexs[page_indexs.length-1]">
					<li><a href="#" @click="handleClick(cur_page+1)">下一页</a></li>
					<li><a href="#" @click="handleClick(total_page)">尾页</a></li>
				</template>
			</ul>`,
	methods: {
		handleClick: function(page_index){
			this.$emit('do-page',page_index);
		}
	}
});